<template>
  <div>
    <home-header ></home-header>
    <lunbo01 :list="swiperList"></lunbo01>
    <tubiao02 :list="iconList"></tubiao02>
    <tuijian03 :list="tuijian03"></tuijian03>
    <tuijian04 :list="tuijian04"></tuijian04>
  </div>
</template>

<script>
import HomeHeader from '../components/Header.vue'
import lunbo01 from '../components/lunbo01.vue'
import tubiao02 from '../components/tubiao02.vue'
import tuijian03 from '../components/tuijian03.vue'
import tuijian04 from '../components/tuijian04.vue'
import axios from 'axios'
import { mapState } from 'vuex'
export default{
  name: 'Home',
  components: {
    HomeHeader,
    lunbo01,
    tubiao02,
    tuijian03,
    tuijian04,
  },
  data() {
    return{
      cacheCity:'',
      swiperList:[],
      iconList:[],
      tuijian03:[],
      tuijian04:[],
    }
  },
  computed:{
    ...mapState(['city'])
  },
  methods:{
    getHomeInfo () {
      axios.get('/api/index.json?city=' + this.city)
        .then(this.getHomeinfosucc)
    },
    getHomeinfosucc (res) {
      res=res.data
      if(res.ret && res.data){
        const data = res.data
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.tuijian03 = data.tuijian03List
        this.tuijian04 = data.tuijian04List
      }
    }
  },
  mounted () {
    this.cacheCity = this.city
    this.getHomeInfo()
  },
  activated() {
    if(this.cacheCity !== this.city){
      this.cacheCity = this.city
      this.getHomeInfo()
    }
  }
}
</script>

<style>

</style>
